<template>
  <div class="all">
    <div class="myinfotitle">可申请的订单</div>

    <el-divider id="bottomdivider"></el-divider>
    <div class="hit">
      *初始可申请订单只保留近30天订单
    </div>
    <el-table
      border
      style="border-radius:5px;width:100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      :data="tableData"
      row-key="userId"
      lazy
    >
      <el-table-column type="index" :index="row"> </el-table-column>
      <el-table-column label="订单号" width="100">
        <template #default="scope">
          <i class="el-icon-s-order"></i>
          <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出发地->目的地" width="150">
        <template #default="scope">
          <span style="margin-left: 10px"
            >{{ scope.row.depart }}->{{ scope.row.destination }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="出行日期" width="100">
        <template #default="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.cost }}</span>
        </template>
      </el-table-column>
      <el-table-column label="航班号" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.flightId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit()">申请</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent, ref, getCurrentInstance } from 'vue';
import { Order } from '@/utils/api/order';
import { ElMessage } from 'element-plus';
export default defineComponent({
  name: 'Ordertable',
  setup() {
    const tableData = ref([]);
    const getorder = () => {
      Order.getorder()
        .then((res) => {
          if (res.data.status === '200') {
            tableData.value = res.data;
            console.log(tableData);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    };

    const { ctx } = getCurrentInstance();
    const handleEdit = () => {
      ElMessage.success({
        message: '申请成功,3个工作日后在微信发票中心查看',
        type: 'success',
      });
    };
    return {
      tableData,
      getorder,
      handleEdit,
    };
  },
  mounted: function() {
    this.getorder();
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';

.all {
  color: rgb(70, 109, 161);
  padding-top: 10px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 60px;
  margin-top: 20px;
  .el-table__header tr,
  .el-table__header th {
    height: 25px;
    line-height: 25px;
  }
  .el-tabs.el-tabs--top {
    :deep(.el-tabs__header.is-top) {
      margin-right: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    :deep(.el-tabs__nav.is-top) {
      color: #fff;
      height: 60px;
      width: 200px;
      line-height: 60px;
      padding-left: 0px;
    }

    .el-tab-pane {
      max-height: 400px;
      overflow: hidden;
    }
    :deep(.pane-second.el-tab-pane) {
      padding-top: 0px;
    }
  }
}
.myinfotitle {
  padding-left: 30px;
  height: 50px;
  line-height: 80px;
  text-align: left;
  margin-bottom: 27px;
  font-size: 20px;
  font-weight: 500;
}
#bottomdivider {
  margin-top: 30px;
  height: 0.07px;
  line-height: 0.07px;
}

.hit {
  height: 5px;
  line-height: 5px;
  font-size: 5px;
  color: grey;
  margin-bottom: 10px;
  text-align: right;
}
</style>
